<template>
  <div class="app-container">
    <el-dialog :title="'申请售后'+'（'+form.orderNo+'）'" :visible.sync="dialogVisible" width="50%" append-to-body>
      <el-form ref="form" :model="form">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="售后类型" prop="handleType" required>
              <el-select v-model="form.handleType" filterable style="width: 100%" @change="changeType">
                <el-option
                  v-for="item in dict.type.ims_after_sale_handle_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.handleType==1">
            <el-form-item label="退款金额(元)" prop="returnPrice" required>
              <el-input type="number" v-model="form.returnPrice" placeholder="请输入" :min="0"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
<!--        退货，换货，维修-->
        <el-row :gutter="10" v-if="form.handleType==2||form.handleType==3||form.handleType==4||form.handleType==8">
          <el-col :span="8">
            <el-form-item label="快递名称" prop="expressName">
              <el-input  v-model="form.expressName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递单号" prop="expressNo">
              <el-input  v-model="form.expressNo" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="16" v-if="form.handleType==7">
            <el-form-item label="收件人信息" prop="currentAddress" required>
              <el-input type="textarea" v-model="form.currentAddress" placeholder="参考格式：张三**省**市**区**街道**小区13088888888"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="16" v-if="form.handleType!=7">
            <el-form-item label="售后原因" prop="reason" required>
              <el-input type="textarea" v-model="form.reason" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="图片上传" prop="fileUrl" required>
              <div class="myImg" v-if="form.fileUrl">
                <i class="el-icon-close" @click="form.fileUrl=null"></i>
                <el-image
                  :src="form.fileUrl"
                  fit="contain"
                  :preview-src-list="[form.fileUrl]"
                >
                </el-image>
              </div>
              <el-upload
                v-else
                :headers="headers"
                :action="action"
                :on-success="uploadSuccess"
                :on-progress="uploadProgress"
                :show-file-list="false"
                accept=".jpg,.jpeg,.png"
              >
                <el-button type="primary" plain>点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div  v-if="form.handleType==2||form.handleType==3||form.handleType==4">
        <div class="myTitle">退货信息</div>
        <el-table
          :data="list"
          maxHeight="500"
          v-loading="loading"
          @selection-change="handleChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
          <el-table-column prop="title" label="商品/套餐名称" align="center"/>
          <el-table-column prop="priceType" label="类型" align="center" width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.ats_price_type" :value="scope.row.priceType"/>
            </template>
          </el-table-column>
          <el-table-column prop="skuDescCn" label="商品规格" align="center"/>
          <el-table-column prop="quantity" label="数量(元)" align="center" width="100"/>
          <el-table-column prop="unitPrice" label="单价(元)" align="center" width="100"/>
          <el-table-column prop="totalPrice" label="总价(元)" align="center" width="100"/>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="dialogOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {addSaleAfter, getSaleAfterGood} from "@/api/imsMng";
import {getToken} from "@/utils/auth";

export default {
  dicts: ['ims_after_sale_handle_type', 'ats_price_type'],
  data() {
    return {
      loading: false,
      dialogVisible: false,
      list: [],
      form: {
        handleType: '',
        reason: '',
        fileUrl: '',
        expressId: '',
        expressNo: '',
      },
      selectList: [],
      selectIdList: [],
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      action: process.env.VUE_APP_BASE_API + '/ims/product/image/upload'
    }
  },
  methods: {
    show(form) {
      this.dialogVisible = true
      this.resetForm('form')
      this.form.saleOrderId = form.id
      this.form.orderNo = form.orderNo
    },
    changeType(e) {
      if (e == 2 || e == 3 || e == 4) {
        this.loading = true
        getSaleAfterGood(this.form.orderNo).then(res => {
          this.list = res.data
        }).finally(e => {
          this.loading = false
        })
      }
    },
    uploadProgress() {
      this.loading = true
    },
    uploadSuccess(res) {
      this.loading = false
      if (res.code != 200) {
        this.form.fileUrl = ''
        this.$message.error(res.msg)
        return
      }
      this.$set(this.form, 'fileUrl', res.data.imageUrl)
    },
    handleChange(e) {
      this.selectList = e
    },
    dialogOk() {
      this.$refs.form.validate(e => {
        if (e) {
          if ((this.form.handleType == 2 || this.form.handleType == 3 || this.form.handleType == 4) && !this.selectList.length) {
            this.$message.error('售后商品不能为空')
            return
          }
          this.loading = true
          this.form.itemList = this.selectList
          addSaleAfter(this.form).then(res => {
            this.$emit('ok')
            this.dialogVisible = false
            this.$message.success('申请成功')
          }).finally(e => {
            this.loading = false
          })
        }
      })
    },
  }
}
</script>
